<template>
  <view>
    <m-top :autoBack="true" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight"> 登录 </m-top>

    <m-container :top="glTop">
      <view class="pdv40">
        <view class="post-box">
          <view class="flex justify-center">
            <image class="post-box-logo" src="@/static/logo.png"></image>
          </view>

          <view class="post-box">
            <m-card>
              <view class="post-form">
                <view class="form-item">
                  <view class="label font28 c333">手机号</view>
                  <view class="mgt20">
                    <u-input
                      color="#333333"
                      fontSize="28rpx"
                      border="none"
                      v-model="state.phone"
                      placeholder="请输入您的手机号"
                      :customStyle="{
                        'background-color': '#F6F5FA',
                        height: '76rpx',
                        'border-radius': '12rpx',
                        padding: '0 20rpx',
                      }"
                      placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                    >
                      <template #prefix>
                        <view class="c333 font28 flex align-center prefix">
                          <text class="prefix-text">+86</text>
                          <u-icon name="arrow-down" size="20rpx" color="#3333333"></u-icon>
                        </view>
                      </template>
                    </u-input>
                  </view>
                </view>

                <view class="form-item">
                  <view class="label font28 c333 flex">
                    <view>验证码</view>
                    <view class="code-text mglauto" @click="getCodeHandler">{{ tips }} </view>
                  </view>
                  <view class="mgt20">
                    <u-input
                      color="#333333"
                      fontSize="28rpx"
                      border="none"
                      placeholder="请输入验证码"
                      v-model="state.vCode"
                      :customStyle="{
                        'background-color': '#F6F5FA',
                        height: '76rpx',
                        'border-radius': '12rpx',
                        padding: '0 20rpx',
                      }"
                      placeholderStyle="color: #BBBBBB;font-size: 28rpx"
                    ></u-input>
                  </view>
                </view>
              </view>
            </m-card>
          </view>

          <view class="mgt20 flex justify-center align-center" @click="checkHandler">
            <u-checkbox-group v-model="check" placement="column" activeColor="#481EC1">
              <u-checkbox labelSize="28rpx" labelColor="#666666" size="32rpx" label="已阅读并同意" name="check">
              </u-checkbox>
            </u-checkbox-group>
            <text class="font28 c666"
              ><text
                class="c481"
                @click.stop="
                  $u.route({
                    url: '/pages-details/privacy/index',
                    params: {
                      id: 679,
                      title: '用户协议',
                    },
                  })
                "
                >用户协议 </text
              >和
              <text
                class="c481"
                @click="
                  $u.route({
                    url: '/pages-details/privacy/index',
                    params: {
                      id: 678,
                      title: '隐私政策',
                    },
                  })
                "
                >隐私政策
              </text></text
            >
          </view>

          <view class="post-submit">
            <u-button
              type="primary"
              color="#481EC1"
              text="登录"
              @click="loginHandler"
              :customStyle="{
                height: '84rpx',
                'border-radius': '20rpx',
                'box-shadow': ' 0rpx 2rpx 12rpx 0rpx rgba(27,166,131,0.0988)',
                'font-size': '32rpx',
              }"
            ></u-button>
          </view>
        </view>
      </view>
    </m-container>

    <u-code :seconds="seconds" ref="uCode" @change="(text) => (tips = text)"></u-code>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import { getCodeApi, loginApi } from "@/api/modules/base.js";
import Schema from "async-validator";
import { __token__name__ } from "@/config/storage.js";

export default {
  mixins: [GlTopMixin],
  components: {},
  data() {
    return {
      check: [],
      tips: "",
      seconds: 60,
      state: {
        phone: "",
        vCode: "",
      },
      descriptor: {
        vCode: {
          type: "string",
          required: true,
          message: "验证码必填",
        },
        phone: [
          {
            type: "string",
            required: true,
          },
          {
            validator: (rule, value, callback) => {
              console.log(value);
              return this.$u.test.mobile(value);
            },
            message: "手机号不正确",
          },
        ],
      },
    };
  },

  methods: {
    checkHandler() {
      if (this.check.length > 0) this.check.splice(0, 1);
      else this.check.push("check");
    },

    toHome() {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },

    async getCodeHandler() {
      if (!this.$u.test.mobile(this.state.phone)) return this.$u.toast("请输入正确的手机号");
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        await getCodeApi(this.state.phone).finally(uni.hideLoading);
        this.$refs.uCode.start();
        uni.$u.toast("验证码已发送");
      } else {
        // uni.$u.toast("倒计时结束后再发送");
      }
    },

    async loginHandler() {
      if (this.check.length === 0) {
        uni.$u.toast("请先阅读用户协议和隐私政策");
        return;
      }
      const validator = new Schema(this.descriptor);
      validator.validate(this.state, async (errors, fields) => {
        if (errors) {
          const { message } = errors[0];
          return uni.$u.toast(message);
        }
        uni.showLoading({
          title: "加载中",
        });
        const response = await loginApi(this.state).finally(uni.hideLoading);
        this.$u.toast("登录成功");
        console.log(response, "-----");
        uni.setStorageSync(__token__name__, response.token);
        // this.$store.commit('SET_USER_INFO', response.memberInfo)
        await this.$u.sleep(2000);
        this.toHome();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.post-box {
  margin-top: 80rpx;

  &-logo {
    width: 260rpx;
    height: 240rpx;
    margin: 0 auto;
  }
}

.post-form {
  padding: 20rpx;

  .form-item {
    &:not(:first-child) {
      margin-top: 40rpx;
    }
  }
}

.post-submit {
  margin-top: 120rpx;
}

.prefix {
  padding-right: 20rpx;
  border-right: 2rpx dashed #dedede;

  &-text {
    padding-right: 4rpx;
  }
}

.code-text {
  color: #ff8f1f;
}
</style>
